<template>
  <div class="login box-b w h over-h ">
    <div class="main">
      <div class="w h f-c">

        <div class="main-left">
          <welcome-card class="b-f"></welcome-card>
        </div>
        <div class="f-c a-i-c">
          <div class="main-right el-card f-g1">

            <div class="login-title fs-w-b fs30"> 欢迎您进入自动标注系统 </div>
            <div class="login-title fs26" style="margin-top:10px"> 注册 </div>

            <div class="user-info">
              <lm-form :ref="editFormRefKey" inline label-width="120px" class="lm-w lm-h"
                :layout="editFromLayout" v-model="editForm">
              </lm-form>
            </div>
            <div class="button-info">
              <div v-loading="loading" class="user-register-button" @click="registerSubmit">创建</div>
            </div>
            <div class="bottom-info">
              <span class="bottom-text">
                已有账户?去 <span class="cur-p" @click="goLogin">登录</span>
              </span>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import welcomeCard from '@/views/welcome/welcome-card.vue'
import { register } from '@/apis/login'
import { type RequestCode } from '@/server/base'
import { type LoginUser } from '@/server/index'
import { ElIconRender } from '@/importComponents'
import { type ValidateFieldsError } from 'async-validator'

export default {
  components: {
    welcomeCard,
    ElIconRender
  },
  data() {
    return {
      editFormRefKey: 'registerRef',

      editForm: {} as {} | LoginUser | any,
      editFromLayout: [
        {
          prop: 'name',
          label: '姓名',
          type: 'input',
          itemClass: 'column_1',
          clearable: true,
          required: true
        },
        {
          prop: 'username',
          label: '用户名',
          type: 'input',
          itemClass: 'column_1',
          clearable: true,
          required: true
        },
        {
          prop: 'jobNumber',
          label: '工号',
          type: 'input',
          itemClass: 'column_1',
          clearable: true,
          required: true
        },
        {
          prop: 'mobile',
          label: '电话',
          type: 'input',
          itemClass: 'column_1',
          regex: /^1[0-9]{10}/,
          required: true,
          clearable: true
        },
        {
          prop: 'email',
          label: '邮箱',
          type: 'input',
          itemClass: 'column_1',
          regex: /^[^@]*[@][a-zA-Z]*[.]?[a-zA-Z]*/,
          required: true,
          clearable: true
        },
        {
          prop: 'password',
          label: '账户密码',
          type: 'input',
          showPassword: true,
          itemClass: 'column_1',
          regex: /^[0-9a-zA-Z]{8,12}/,
          required: true,
          message: '请输入8-12位字母数字组合',
          clearable: true
        },
        {
          prop: 'password2',
          label: '确认密码',
          type: 'input',
          showPassword: true,
          itemClass: 'column_1',
          message: '请输入8-12位字母数字组合',
          regex: /^[0-9a-zA-Z]{8,12}/,
          required: true,
          clearable: true
        }
      ] as any[],

      loading: false
    }
  },
  computed: {
    isDevelopment() {
      return import.meta.env.toString() != 'production'
    }
  },
  methods: {
    /**
     * 登录
     */
    submitSave() {
      if (this.editForm.password2 != this.editForm.password) {
        ;(this as any).$message.error('两次输入密码不一致！')
        return
      }
      this.loading = true
      const { password2, ...params } = this.editForm
      register(params)
        .then((res: RequestCode) => {
          // 注册成功 用户信息
          this.$router.push({ name: 'login' })
        })
        .catch(error => {
          this.loading = false
          // ;(this as any).$message.error(error.message || error.msg || '登录失败，请稍后再试！')
        })
    },
    registerSubmit(){
      const editFormRef = this.$refs[this.editFormRefKey] as any
      editFormRef.validate((isValid: boolean, invalidFields?: ValidateFieldsError) => {
        if (!isValid) {
          //滚动到未通过校验的字段
          if (invalidFields && Object.keys(invalidFields).length > 0) {
            editFormRef.scrollToField(Object.keys(invalidFields)[0])
          }
          return
        }
        this.submitSave()
      })
    },
    goLogin() {
      this.$router.push({ name: 'login' })
    }
  },
  created() {
  }
}
</script>

<style lang="css">
.user-info .van-field__control {
  font-size: 16px !important;
}
</style>

<style lang="scss" scoped>
.login {
  box-sizing: border-box;
  background: #fff;

  .main {
    box-sizing: border-box;
    user-select: none;
    padding: 24px 24px;
    height: 100%;
    width: 100%;
    @extend .f-c, .w, .a-i-c;

    .main-left {
      width: 60%;
      height: 100%;
      // min-width: 300px;
      // max-width: 400px;
      margin-right: 120px;
    }

    .main-right {
      width: 40%;
      min-width: 400px;
      max-width: 500px;
      // margin-left: 120px;
      box-sizing: border-box;
      min-height: 520px;
      padding: 38px 54px 66px 52px;
      position: relative;

      .login-title {
        margin-top: 30px;
        /** 文本1 */
        font-size: 26px;
        color: rgba(91, 103, 202, 1);
      }

      .user-info {
        margin-top: 46px;

        .pass {
          margin-top: 30px;
        }

        .user,
        .pass {
          border-bottom: 1px solid rgba(227, 232, 241, 1);
        }

        .user-label {
          width: 20px;
          height: 20px;
        }

        .pass-label {
          width: 20px;
          height: 20px;
        }

        .forget {
          margin-top: 18px;
          font-size: 12px;
          font-weight: 400;
          color: rgba(91, 103, 202, 1);
          text-align: right;
          vertical-align: top;
        }
      }

      .bottom-info {
        position: absolute;
        bottom: 42px;
        width: calc(100% - 50px);
        @extend .f-c, .a-i-c;

        .bottom-text {
          font-size: 14px;
          font-weight: 400;
          color: rgba(44, 64, 110, 1);

          /** 文本2 */
          span {
            font-weight: 700;
          }
        }
      }

      .button-info {
        margin-top: 20px;
        margin-bottom: 20px;

        .user-register-button {
          cursor: pointer;
          width: 100%;
          text-align: center;
          line-height: 52px;
          height: 52px;
          border-radius: 14px;
          background: rgba(91, 103, 202, 1);
          box-shadow: -3px 7px 13px 0px rgba(241, 247, 255, 1);
          color: #fff;
        }
      }
    }
  }
}
</style>